<template>
  <div :ref="refName" style="width:900px" />
</template>

<script>
// 引入 wangEditor
import wangEditor from 'wangeditor'
export default {
  name: 'WangEditor',
  props: {
    // 提示信息
    placeholder: {
      type: String,
      default: '请输入内容'
    },
    // 高度
    height: {
      type: Number,
      default: 200
    },
    // 绑定内容
    value: String,
    // 绑定选择器名称
    refName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      editor: null // 用于销毁
    }
  },
  watch: {
    value: function(value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
  },
  mounted() {
    // eslint-disable-next-line new-cap
    this.editor = new wangEditor(this.$refs[this.refName]) // 创建实例
    this.editor.config.height = this.height // 配置高度
    this.editor.config.zIndex = 10 // 配置层级
    this.editor.config.placeholder = this.placeholder // 配置提示文字
    this.editor.config.onchange = newHtml => { // 配置回调
      this.$emit('input', newHtml)
    }
    this.editor.config.onchangeTimeout = 500 // 配置回调时长 修改为 500ms ，默认为 200ms太快
    this.editor.create() //  创建编辑器
    console.log(this.value, '创建编辑器创建编辑器创建编辑器')
    this.editor.txt.html(this.value) // 设置初始内容
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  }
}
</script>

<style>

</style>
